<template>
  <div>
    <el-form inline=true
             label-suffix="："
             :model="form"
             :rules="rules"
             ref="ruleForm"
             hide-required-asterisk="true">
      <el-row align="middle"
              type="flex">
        <el-form-item label="年级"
                      prop="grade">
          <el-select v-model="form.grade"
                     size="mini"
                     clearable
                     placeholder="请选择年级"
                     style="width: 100px;"
                     @change="handleChangeYear1">
            <el-option v-for="(item, index) in gradeList"
                       :key="index"
                       :label="item.xqszxn"
                       :value="item.xqszxn" />
          </el-select>
          <span class="star">*</span>
        </el-form-item>
        <el-form-item label="专业层次"
                      prop="speName"
                      style="margin-left: 10px;">
          <el-select v-model="form.speName"
                     size="mini"
                     clearable
                     placeholder="请选择专业层次"
                     style="width: 200px;">
            <el-option v-for="(item, index) in speList1"
                       :key="index"
                       :label="item.trainingLevelname != '' ? item.specialtyName + '【' + item.trainingLevelname + '】' : item.specialtyName"
                       :value="item.id" />
          </el-select>
          <span class="star">*</span>
        </el-form-item>
        <el-form-item label="学员队"
                      prop="team"
                      style="margin-left: 10px;">
          <el-select v-model="form.team"
                     size="mini"
                     clearable
                     placeholder="请选择学员队"
                     style="width: 200px;">
            <el-option v-for="(item, index) in teamList"
                       :key="index"
                       :label="item.deptName"
                       :value="item.id" />
          </el-select>
          <span class="star">*</span>
        </el-form-item>
        <el-form-item label="专业班次个数"
                      prop="speAmount"
                      style="margin-left: 10px;">
          <el-input-number v-model="form.speAmount"
                           controls-position="right"
                           size="mini"
                           :min="1"
                           :max="99"
                           placeholder="请输入专业班次个数"
                           style="width: 80px;" />
          <span class="star">*</span>
        </el-form-item>
        <el-form-item label="所在校区"
                      prop="school"
                      style="margin-left: 10px;">
          <el-select v-model="form.school"
                     size="mini"
                     clearable
                     placeholder="请选择所在校区"
                     style="width: 120px;">
            <el-option v-for="(item) in schoolList"
                       :key="item.id"
                       :label="item.deptName"
                       :value="item.id" />
          </el-select>
          <span class="star">*</span>
        </el-form-item>
        <el-form-item label="额定人数"
                      prop="stuAmount"
                      style="margin-left: 10px;">
          <el-input-number v-model="form.stuAmount"
                           controls-position="right"
                           size="mini"
                           :min="1"
                           :max="99"
                           placeholder="请输入额定人数"
                           style="width: 90px;" />
          <span class="star">*</span>
        </el-form-item>
        <el-form-item style="margin-left: 10px;">
          <div class="report-button"
               style="width: 120px; background: #FFF6F0; border: 1px solid #E9B535; color: #E9B535;"
               @click="handleCreate">
            <span>生成专业班次</span>
          </div>
        </el-form-item>
      </el-row>
    </el-form>
    <el-table :height="tableHeight"
              :data="tableData"
              class="xpaas-table-class"
              row-class-name="xpaas-row-class"
              cell-class-name="xpaas-cell-class"
              header-row-class-name="xpaas-header-row-class"
              header-cell-class-name="xpaas-header-cell-class">
      <el-table-column prop="className"
                       align="center">
        <template slot="header">
          专业班次<span class="star">*</span>
        </template>
        <template scope="scope">
          <el-input v-model="scope.row.className"
                    size="mini"
                    style="width: 80%;" />
        </template>
      </el-table-column>
      <el-table-column prop="alias"
                       align="center">
        <template slot="header">
          别名<span class="star">*</span>
        </template>
        <template scope="scope">
          <el-input v-model="scope.row.alias"
                    size="mini"
                    style="width: 80%;" />
        </template>
      </el-table-column>
      <el-table-column prop="grade"
                       align="center">
        <template slot="header">
          年级<span class="star">*</span>
        </template>
        <template scope="scope">
          <el-select v-model="scope.row.grade"
                     size="mini"
                     clearable
                     placeholder="请选择年级"
                     style="width: 80%;"
                     @change="handleChangeYear2(scope.row)">
            <el-option v-for="(item, index) in gradeList"
                       :key="index"
                       :label="item.xqszxn"
                       :value="item.xqszxn" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="specialtyName"
                       align="center">
        <template slot="header">
          专业层次<span class="star">*</span>
        </template>
        <template scope="scope">
          <el-select v-model="scope.row.yearSpecialtyId"
                     size="mini"
                     clearable
                     @change="selChangeSpec(scope.row)"
                     placeholder="请选择专业层次"
                     style="width: 80%;">
            <el-option v-for="(item, index) in scope.row.speList2"
                       :key="index"
                       :label="item.trainingLevelname != '' ? item.specialtyName + '【' + item.trainingLevelname + '】' : item.specialtyName"
                       :value="item.id" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="studentTeam"
                       align="center">
        <template slot="header">
          学员队<span class="star">*</span>
        </template>
        <template scope="scope">
          <el-select v-model="scope.row.studentTeam"
                     size="mini"
                     @change="selChangeTeam(scope.row)"
                     clearable
                     placeholder="请选择学员队"
                     style="width: 80%;">
            <el-option v-for="(item, index) in teamList"
                       :key="index"
                       :label="item.deptName"
                       :value="item.id" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="campus"
                       align="center">
        <template slot="header">
          所在校区<span class="star">*</span>
        </template>
        <template scope="scope">
          <el-select v-model="scope.row.campus"
                     size="mini"
                     clearable
                     placeholder="请选择所在校区"
                     style="width: 80%;">
            <el-option v-for="(item) in schoolList"
                       :key="item.id"
                       :label="item.deptName"
                       :value="item.id" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="ratedNumber"
                       align="center">
        <template slot="header">
          额定人数<span class="star">*</span>
        </template>
        <template scope="scope">
          <el-input-number v-model="scope.row.ratedNumber"
                           controls-position="right"
                           size="mini"
                           :min="1"
                           :max="99"
                           placeholder="请输入额定人数"
                           style="width: 80%;" />
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex; width: 300px; margin: 20px auto;">
      <div class="report-button"
           style="width: 80px; height: 35px; line-height: 35px; background: #FFF6F0; border: 1px solid #E9B535; color: #E9B535;"
           @click="handleSave">
        <span>保存</span>
      </div>
      <div class="report-button"
           style="width: 80px; height: 35px; line-height: 35px; background: #FFEEEF; border: 1px solid #FA533C; color: #FA533C;"
           @click="handleCancel">
        <span>取消</span>
      </div>
    </div>
  </div>
</template>

<script>
import { ndselect } from '@/api/professional/details'
// import { reqChoosezylist } from '@/api/propositionReview/approval'
import { loadDeptListByCategory } from '@/api/dept.js'
import { reqXydList } from '@/api/admin1/check'
import { reqSpeByYear } from '@/api/classHoursAddList/addList'
import { batchSave } from '../../../api/classHoursAddList/addList'
export default {
  data() {
    return {
      gradeList: [],
      speList1: [],
      speList2: [],
      teamList: [],
      schoolList: [],
      tableHeight: 500,
      form: {
        grade: '',
        speName: '',
        team: '',
        speAmount: '',
        school: '',
        stuAmount: '',
        deptName:'',
        specName:''
      },
      tableData: [],
      rules: {
        grade: [{ required: true, message: '请选择年级', trigger: 'blur' }],
        speName: [
          { required: true, message: '请选择专业层次', trigger: 'blur' },
        ],
        team: [{ required: true, message: '请选择学员队', trigger: 'blur' }],
        speAmount: [
          { required: true, message: '请输入专业班次个数', trigger: 'blur' },
        ],
        school: [
          { required: true, message: '请选择所在校区', trigger: 'blur' },
        ],
        stuAmount: [
          { required: true, message: '请输入额定人数', trigger: 'blur' },
        ],
      },
    }
  },
  mounted() {
    this.tableHeight = 1000
    ndselect().then((res) => {
      if (res.data.code === 200) {
        this.gradeList = res.data.data
      }
    })
    // reqChoosezylist().then((res) => {
    //   if (res.data.code === 200) {
    //     this.speList1 = res.data.data
    //     this.speList2 = res.data.data
    //   }
    // })
    reqXydList().then((res) => {
      if (res.data.code === 200) {
        this.teamList = res.data.data
      }
    })
    loadDeptListByCategory('3').then((res) => {
      this.schoolList = res.data
    })
  },
  created() {
    this.tableHeight = window.innerHeight - 270
    window.onresize = () => {
      return (() => {
        this.tableHeight = window.innerHeight - 270
      })()
    }
  },
  methods: {
    selChangeSpec(rows){
      let spe;
      console.log(rows.specialtyName)
      if(rows.specialtyName == ''){
        spe = rows.speList2.find((item) => {
          return item.id == rows.yearSpecialtyId
        })
      } else {
        spe = this.speList1.find((item) => {
          return item.id == rows.yearSpecialtyId
        })
      }
      rows.specialtyName = spe.specialtyName;
      rows.trainingLevel = spe.trainingLevel;
    },
    selChangeTeam(rows){
      const team = this.teamList.find((item) => {
        return item.id === rows.studentTeam
      })
      rows.studenteamname = team.deptName;
    },
    handleChangeYear1: function (val) {
      this.speList1 = []
      if (val !== '') {
        reqSpeByYear(this.form.grade).then((res) => {
          if (res.data.code === 200) {
            this.speList1 = res.data.data
          }
        })
      }
    },
    handleChangeYear2: function (row) {
      row.speList2 = []
      row.specialtyName = ''
      if (row.grade !== '') {
        reqSpeByYear(row.grade).then((res) => {
          if (res.data.code === 200) {
            row.speList2 = res.data.data
          }
        })
        row.year = row.grade;
        row.yearSpecialtyId = ''
      }
    },
    handleCreate: function () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.tableData = []
          // debugger
          const team = this.teamList.find((item) => {
            return item.id === this.form.team
          })
          const spe = this.speList1.find((item) => {
            return item.id === this.form.speName
          })
          const yearN = this.form.grade.substring(this.form.grade.length - 2)
          const speName =
            spe.trainingLevelname != ''
              ? spe.specialtyName + '【' + spe.trainingLevelname + '】'
              : spe.specialtyName
          for (let index = 1; index <= this.form.speAmount; index++) {
            this.tableData.push({
              className: yearN + index.toString().padStart(2, '0') + speName,
              alias: yearN + index.toString().padStart(2, '0') + speName,
              grade: this.form.grade,
              specialtyName: spe.specialtyName,
              studentTeam: this.form.team,
              campus: this.form.school,
              ratedNumber: this.form.stuAmount,
              studenteamname: team.deptName,
              trainingLevel: spe.trainingLevel,
              year: this.form.grade,
              yearSpecialtyId: this.form.speName,
              speList2: this.speList1,
            })
          }
        } else {
          return false
        }
      })
    },
    handleSave: function () {
      if (this.tableData === null || this.tableData.length === 0) {
        this.handleWarning('未生成专业班次信息')
      } else {
        let record
        for (let index = 0; index < this.tableData.length; index++) {
          record = this.tableData[index]
          if (record.className === '' || record.className === undefined) {
            this.handleWarning('第' + (index + 1) + '行 专业班次 未填写')
            return
          }
          if (record.alias === '' || record.alias === undefined) {
            this.handleWarning('第' + (index + 1) + '行 别名 未填写')
            return
          }
          if (record.grade === '' || record.grade === undefined) {
            this.handleWarning('第' + (index + 1) + '行 年级 未选择')
            return
          }
          if (
            record.specialtyName === '' ||
            record.specialtyName === undefined
          ) {
            this.handleWarning('第' + (index + 1) + '行 专业层次 未选择')
            return
          }
          if (record.studentTeam === '' || record.studentTeam === undefined) {
            this.handleWarning('第' + (index + 1) + '行 学员队 未选择')
            return
          }
          if (record.campus === '' || record.campus === undefined) {
            this.handleWarning('第' + (index + 1) + '行 所在校区 未选择')
            return
          }
          if (record.ratedNumber === '' || record.ratedNumber === undefined) {
            this.handleWarning('第' + (index + 1) + '行 额定人数 未填写')
            return
          }
        }
        console.log(this.tableData)
        batchSave(this.tableData).then((res) => {
          if (res.data.code === 200) {
            this.$message({
              message: '批量生成专业班次成功',
              type: 'success',
            })
            this.$router.push({ path: '/admin/csTest/csTeat' })
          } else {
            this.$message.error('批量生成专业班次失败！')
          }
        })
      }
    },
    handleCancel: function () {
      this.$router.push({ path: '/admin/csTest/csTeat' })
    },
    handleWarning: function (keyword) {
      this.$message({
        message: keyword + '！',
        type: 'warning',
      })
    },
  },
}
</script>

<style lang="less" scoped>
@fontFamily: 'Microsoft YaHei';
.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;
  ::v-deep div.el-table__header-wrapper {
    table.el-table__header {
      thead {
        tr.xpaas-header-row-class {
          padding: 0;
          height: 76px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
  ::v-deep div.el-table__body-wrapper {
    table.el-table__body {
      tbody {
        tr.xpaas-row-class {
          td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
          td.xpaas-cell-class {
            height: 76px;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}
.report-button {
  height: 28px;
  line-height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: 69px;
}
.star {
  color: red;
  margin-left: 5px;
  font-size: 16px;
  font-weight: 600;
}
/deep/ .el-form-item__label {
  font-size: 14px;
  font-weight: 600;
  color: #004ca7;
}
/deep/ .el-form-item__error {
  top: 35px;
}
</style>
